<template>
  <div class="">
    <div id="between"></div>
  </div>
</template>

<script lang="ts" setup>
import echarts from "echarts";
import { onMounted } from "vue";
import {getForeinData} from "../../charts"
 let option = {
  // title: {
  //   text: 'Stacked Area Chart'
  // },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['生存', '死亡']
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
        axisLabel: {
            textStyle: {
              color: "#fff",
            },
          },
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '生存',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '死亡',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    }
  ]
};

onMounted(() => {
  
getForeinData().then(res=>{
  console.log(res);
 option.xAxis[0].data= res.globalDailyHistory.map(item=>item.date)
  option.series[0].data= res.globalDailyHistory.map(item=>item.all.confirm)
  option.series[1].data= res.globalDailyHistory.map(item=>item.all.dead)

  var chartDom = document.getElementById("between");
  var myChart = echarts.init(chartDom);
  myChart.setOption(option);

 window.addEventListener(
    "resize",
    function () {
      myChart.resize();
    },
    false
  );
})
  
});
</script>

<style lang="scss">
#between {
  height: 320px;
  text-align: center;
  padding: 0 10px;
  margin-top: 10px;
}
</style>
